define(['template','cookie', 'jquery'], (template,cookie) => {
    class Header {
        constructor() {
            this.loadHtml().then(() => {
                this.loginForm();
                this.login();
                this.logout();
                this.register();
                this.getTabs();
                this.getCarCount();
                this.closeForm();
                this.isLog();
                console.dir($)
            });
        }

        loadHtml() {
            return new Promise(
                (resolve => $('header').load('/html/modules/header.html', resolve))
            )
        }

        // 登录表单显示
        loginForm() {
            $('#login-btn').on('click', function () {
                $('#login').css('display', 'block');
            })
        };

        //登录表单关闭
        closeForm() {
            $('#login-close').on('click', function () {
                $('#phone, #password').val('');
                $('#phoneWrong, #passWrong').css('display', 'none');
                $('#login').css('display', 'none');
            })
        }

        //登录
        login() {
            let that=this;
            $('#logBtn').on('click', function () {
                const user = localStorage.getItem('user');
                const arr = JSON.parse(user);
                const phone = $('#phone').val();
                const password = $('#password').val();
                const find = arr.find(one => {
                    return one.phone == phone
                });
                //有该账号
                if (find) {
                    $('#phoneWrong').css('display', 'none');
                    //密码输入正确
                    if (find.password == password) {
                        $.cookie('name', find.name, { expires: 7, path: '/' });

                        //关闭登录框
                        $('#login-close').click();
                        that.isLog();
                    }
                    //密码输入错误
                    else {
                        $('#passWrong').css('display', 'block');
                        return;
                    }
                }
                //没有账号
                else {
                    $('#phoneWrong').css('display', 'block');
                    return;
                }

            });
            this.isLog();
        }

        //退出登录
        logout() {
            $('#logout-btn').on('click', () => {
                $.removeCookie('name');
                this.isLog();
            })

        }

        //渲染登录
        isLog() {
            $.cookie.raw = true;
            $.cookie('foo', unescape);
            const name = $.cookie('name');
            console.log(name)
            //登陆了
            if (name) {
                console.log(name)
                $('#username').html(`欢迎您！ ${name}`);
                $('#login-btn').css('display', 'none');
                $('#logout-btn').css('display', 'block');
            }
            //未登录
            else {
                $('#login-btn').css('display', 'block');
                $('#logout-btn').hide();
                $('#username').html(``);
            }
        }

        // 注册按钮
        register() {
            $('#register-btn').on('click', () => {
                let tempwindow = window.open('_blank');
                tempwindow.location = '/html/register.html';
            })
        }

        //获取标签栏
        getTabs() {
            $.get('http://www.xiongmaoyouxuan.com/api/tabs', resp => {

                if (resp.code === 200) {
                    const {list} = resp.data;
                    $('#tabs').html(template('tabsTemplate', {list: list.slice(8)}))
                }
            })
        }


        //获取购物车数量
        getCarCount() {
            let car = localStorage.getItem('car');
            let count = 0;
            if (car) {
                car = JSON.parse(car);
                count = car.reduce((num, shop) => {
                    return num + shop.count
                }, 0)
            }
            $('#car-count').html(count);
            $('#mycar-count').html(`我的购物车(${count})`);
            return count;
        }


    }

    return new Header();
})